import React, {useEffect, memo,useState } from 'react'
import { connect } from 'react-redux'
import './Sort.css'
import * as api from '@/api'
import * as actionTypes from './store/actionCreators'
import Scroll from '../../baseUI/scroll/index'
import SortInput from '../../components/sort/sortInput/SortInput'
import SortLeftItem from '../../components/sort/sortLeftItem/SortLeftItem'
import SortRightItem from '../../components/sort/sortRightItem/SortRightItem'

const Sort = (props) => {
    const { sortdata } = props
    let [sortList, setSortList] = useState([])
    const { getSortDataDispatch } = props
    const { sortLeftItem = [], sortRightItem = [] } = sortdata
    let [page, setPage] = useState(1)
    useEffect(()=>{
        if(!sortdata.length){
            getSortDataDispatch()
        }
        fetchSortList()
    },[])
    const fetchSortList = () => {
        api
            .reqsortlist(page)
            .then(res => {
                setSortList([
                    ...sortList,
                    ...res.data.data.sortList
                ])
            })
    }
    useEffect(() => {
        fetchSortList()
    }, [page])
    return (
            <div className="sort-container">
                <div className="sort-head">
                    <SortInput />
                </div>
                <div className="sort-body">
                    <div className="sort-hd">
                        <SortLeftItem sortLeftItem={sortLeftItem}/>
                    </div>
                    
                        <div className="sort-bd">
                            {/* <Scroll
                                direction="vertical"
                                refresh={true}
                            > */}
                                <SortRightItem sortRightItem={sortRightItem} sortList={sortList}/>
                            {/* </Scroll> */}
                        </div>
                    
                </div>
            </div>
    )
}

const mapStateToProps = (state) => {
    console.log(state,'//////');
    return {
        sortdata: state.sort.sortdata
    }
}

const mapStateToDispatch = (dispatch) => {
    return {
        getSortDataDispatch() {
            dispatch(actionTypes.getSortData())
        }
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(memo(Sort))